<template>
  <view>
    <!-- 头部搜索栏 -->
    <my-search></my-search>
    <!-- 内容切换 -->
    <scroll-view scroll-x="true" :scroll-into-view='scrollInto' scroll-with-animation="true">
      <view class="check-box flex-b">
        <view style="flex: 0 0 auto;" :id="'tab'+index"
          :class="['item',check_active_index===index?'active':'','f-w','f-s-14','t-a-c','l-h-100']"
          v-for="(item,index) in check_list" hover-class="animate__animated animate__heartBeat"
          @click="checkActive(index)">{{item}}</view>
      </view>
    </scroll-view>
    <!--主体内容 -->
    <view class="text-box">
      <swiper style="height: 900rpx; " :current="check_active_index" @change="messageChange">
        <swiper-item class="swiper-item" v-for="(item,index) in check_list" :key="index">
          <scroll-view @scrolltolower="ReachBottom" style="height: 900rpx;" scroll-y="true">
            <block v-for="(item1,index1) in messageList" :key="index1">
              <my-message @changeUnlike="changeUnlike" @changeLike="changeLike" @changeConcern="changeConcern"
                :info="item1"></my-message>
            </block>
            <view class="grey-light-bg-color t-a-c l-h-80" style="height: 80rpx;">已经到底了</view>
          </scroll-view>
        </swiper-item>
      </swiper>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        check_list: ['关注', '推荐', '体育', '热点', '财经', "生活", "美女", "黄色", "蓝天", "白云", "你哈"],
        check_active_index: 0,
        scrollInto: 'tab0',
        messageList: [{
          id: 1,
          headImg: "/static/logo.png", //头像
          name: "测试姓名1", //昵称
          time: new Date(), //发布时间
          Concern: true, //是否关注
          content_text: '测试内容111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111', //内容
          content_img: null,
          like: 2, //点赞数量
          unLike: 0, //踩数量
          message: 3 //留言数量
        }, {
          id: 2,
          headImg: "/static/logo.png", //头像
          name: "测试姓名2", //昵称
          time: new Date(), //发布时间
          Concern: true, //是否关注
          content_text: '2222222222222222222222222222222222222', //内容
          content_img: null,
          like: 0, //点赞数量
          unLike: 4, //踩数量
          message: 10 //留言数量
        }, {
          id: 3,
          headImg: "/static/logo.png", //头像
          name: "测试姓名3", //昵称
          time: new Date(), //发布时间
          Concern: false, //是否关注
          content_text: '33333333333333333333333333333333333333333333333333333333333', //内容
          content_img: "/static/test.jpg",
          like: 5, //点赞数量
          unLike: 7, //踩数量
          message: 0 //留言数量
        }]
      };
    },
    methods: {
      checkActive(index) {
        this.check_active_index = index
        this.scrollInto = "tab" + index
      },
      // 关注或者取关
      changeConcern(id) {
        this.messageList.forEach(item => {
          if (item.id === id) {
            item.Concern = !item.Concern
            uni.$showMsg(item.Concern ? "关注成功~" : "取消关注")
            // 之后还要向后端发送请求
          }
        })
      },
      // 点赞和取消点赞
      changeLike(data) {
        this.messageList.forEach(item => {
          if (item.id === data.id) {
            if (data.flag) {
              item.like++
              uni.$showMsg("点赞成功~")
            } else {
              item.like--
              uni.$showMsg("取消点赞")
            }
            // 之后还要向后端发送请求
          }
        })
      },
      // 踩和取消
      changeUnlike(data) {
        this.messageList.forEach(item => {
          if (item.id === data.id) {
            if (data.flag) {
              item.unLike++
              uni.$showMsg("感谢反馈")
            } else {
              item.unLike--
              uni.$showMsg("取消不喜欢")
            }
            // 之后还要向后端发送请求
          }
        })
      },
      // 轮播图滚动
      messageChange(e) {
        this.check_active_index = e.detail.current
        this.scrollInto = "tab" + e.detail.current
        //发送请求
      },
      // scroll-view的下拉刷新，要进行节流阀控制
      ReachBottom() {
        console.log(123)
      }
    },
    // 下拉刷新
    onPullDownRefresh() {
      console.log(123)
    }
  }
</script>

<style lang="scss">
  .check-box {
    padding: 0rpx 20rpx;
    width: 94%;

    .item {
      width: 100rpx;
      height: 100rpx;
    }

    .active {
      color: #FD587B;
      font-size: 18px;
    }
  }

  .text-box {
    .text-item {
      border-top: 16rpx solid #F5F5F5;
    }
  }

  .text-buttom {
    width: 100%;
    height: 70rpx;
  }
</style>